<!-- 记录页 -->
<template>
  <div class="record_content">
    <!-- 标题 -->
    <nut-navbar class="navbar" z-index="5" :clickable="false" fixed safe-area-inset-top>
      <template #content>
        <span>{{ t(String(titleMap[currPage])) }}</span>
      </template>
      <template #left>
        <iconpark-icon style="rotate: 180deg" @click="router.go(-1)" class="close" icon-id="you"
          size="1.2rem"></iconpark-icon>
      </template>
      <template #right> </template>
    </nut-navbar>

    <!-- 搜索 -->
    <div class="search">
      <!-- 充值记录 -->
      <template v-if="currPage == 'recharge'">
        <!-- 充值状态 -->
        <nut-popover v-model:visible="rechargeStatusVisible" :show-arrow="false" :offset="[0, 5]">
          <template #reference>
            <div class="search_item">
              <span>{{ rechargeStatusOptions[rechargeStatus] || "--" }}</span>
              <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
            </div>
          </template>

          <template #content>
            <div class="record_select_content">
              <div class="item" @click="
                () => {
                  rechargeStatus = 9;
                  rechargeStatusVisible = false;
                  resetData();
                }
              " :class="{ active_item: rechargeStatus == 9 }">
                {{ t("rechargeRecord_page_allState") }}
              </div>
              <div class="item" @click="
                () => {
                  rechargeStatus = key;
                  rechargeStatusVisible = false;
                  resetData();
                }
              " :class="{ active_item: rechargeStatus == key }" v-for="(val, key) in RechagreStatusMap()" :key="key">
                {{ val }}
              </div>
            </div>
          </template>
        </nut-popover>
      </template>

      <!-- 提款记录 -->
      <template v-if="currPage == 'withdraw'">
        <!-- 提款状态 -->
        <nut-popover v-model:visible="withdrawStatusVisible" :show-arrow="false" :offset="[0, 5]">
          <template #reference>
            <div class="search_item">
              <span>{{ withdrawStatusOptions[withdrawStatus] || "--" }}</span>
              <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
            </div>
          </template>

          <template #content>
            <div class="record_select_content">
              <div class="item" @click="
                () => {
                  withdrawStatus = 9;
                  withdrawStatusVisible = false;
                  resetData();
                }
              " :class="{ active_item: withdrawStatus == 9 }">
                {{ t("rechargeRecord_page_allState") }}
              </div>
              <div class="item" @click="
                () => {
                  withdrawStatus = key;
                  withdrawStatusVisible = false;
                  resetData();
                }
              " :class="{ active_item: withdrawStatus == key }" v-for="(val, key) in WithdrawStatusMap()" :key="key">
                {{ val }}
              </div>
            </div>
          </template>
        </nut-popover>
      </template>

      <!-- 流水记录 -->
      <template v-if="currPage == 'audit'">
        <!-- 流水状态 -->
        <nut-popover v-model:visible="auditStatusVisible" :show-arrow="false" :offset="[0, 5]">
          <template #reference>
            <div class="search_item">
              <span>{{ auditStatusOptions[auditStatus] || "--" }}</span>
              <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
            </div>
          </template>

          <template #content>
            <div class="record_select_content">
              <div class="item" @click="
                () => {
                  auditStatus = 0;
                  auditStatusVisible = false;
                  resetData();
                }
              " :class="{ active_item: auditStatus == 0 }">
                {{ t("accountsRecord_page_allType") }}
              </div>
              <div class="item" @click="
                () => {
                  auditStatus = key;
                  auditStatusVisible = false;
                  resetData();
                }
              " :class="{ active_item: auditStatus == key }" v-for="(val, key) in AuditStatusMap()" :key="key">
                {{ val }}
              </div>
            </div>
          </template>
        </nut-popover>
      </template>

      <!-- 投注记录 -->
      <template v-if="currPage == 'bet'">
        <!-- 投注平台 -->
        <nut-popover v-model:visible="betPlatVisible" :show-arrow="false" :offset="[0, 5]">
          <template #reference>
            <div class="search_item">
              <span>{{ optionsPlat[betPlat] || "--" }}</span>
              <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
            </div>
          </template>

          <template #content>
            <div class="record_select_content">
              <div class="item" @click="
                () => {
                  betPlat = 0;
                  betPlatVisible = false;
                  resetData();
                }
              " :class="{ active_item: betPlat == 0 }">
                {{ t("promo_page_all") }}
              </div>
              <div class="item" @click="
                () => {
                  betPlat = key;
                  betPlatVisible = false;
                  resetData();
                }
              " :class="{ active_item: betPlat == key }" v-for="(val, key) in platformList" :key="key">
                {{ val }}
              </div>
            </div>
          </template>
        </nut-popover>
        <!-- 游戏 -->
        <nut-popover v-model:visible="gameVisible" :show-arrow="false" :offset="[0, 5]">
          <template #reference>
            <div class="search_item">
              <span>{{ optionsGame[game] || "--" }}</span>
              <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
            </div>
          </template>

          <template #content>
            <div class="record_select_content">
              <div class="item" @click="
                () => {
                  game = 0;
                  gameVisible = false;
                  resetData();
                }
              " :class="{ active_item: game == 0 }">
                {{ t("promo_page_all") }}
              </div>
              <div class="item" @click="
                () => {
                  game = key;
                  gameVisible = false;
                  resetData();
                }
              " :class="{ active_item: game == key }" v-for="(val, key) in gameList" :key="key">
                {{ val }}
              </div>
            </div>
          </template>
        </nut-popover>
      </template>

      <!-- 账变记录 -->
      <template v-if="currPage == 'account'">
        <!-- 账变类型 -->
        <nut-popover v-model:visible="accountTypeVisible" :show-arrow="false" :offset="[0, 5]">
          <template #reference>
            <div class="search_item">
              <span>{{ accountTypeMap[accountType] || "--" }}</span>
              <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
            </div>
          </template>

          <template #content>
            <div class="record_select_content">
              <!-- <div class="item" @click="() => { accountType = 0; accountTypeVisible = false; resetData()}" :class="{'active_item': accountType == 0}">{{ t('accountsRecord_page_allType') }}</div> -->
              <div class="item" @click="
                () => {
                  accountType = key;
                  accountTypeVisible = false;
                  resetData();
                }
              " :class="{ active_item: accountType == key }" v-for="(val, key) in accountTypeMap" :key="key">
                {{ val }}
              </div>
            </div>
          </template>
        </nut-popover>
      </template>

      <!-- 洗码记录 -->
      <template v-if="currPage == 'wash'">
        <!-- 洗码类型 -->
        <nut-popover v-model:visible="washTypeVisible" :show-arrow="false" :offset="[0, 5]">
          <template #reference>
            <div class="search_item">
              <span>{{ washTypeMap[washType] || "--" }}</span>
              <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
            </div>
          </template>

          <template #content>
            <div class="record_select_content">
              <div class="item" @click="
                () => {
                  washType = key;
                  washTypeVisible = false;
                  resetData();
                }
              " :class="{ active_item: washType == key }" v-for="(val, key) in washTypeMap" :key="key">
                {{ val }}
              </div>
            </div>
          </template>
        </nut-popover>
      </template>

      <!-- 时间 -->
      <nut-popover v-model:visible="timeVisible" :show-arrow="false" :offset="[0, 5]">
        <template #reference>
          <div class="search_item">
            <span>{{ timeOptions[time] || "--" }}</span>
            <img class="more" v-lazy="'/imgs/wallet/more.webp'" alt="" />
          </div>
        </template>

        <template #content>
          <div class="record_select_content">
            <div class="item" @click="
              () => {
                time = key;
                timeVisible = false;
                resetData();
              }
            " :class="{ active_item: time == key }" v-for="(val, key) in timeOptions" :key="key">
              {{ val }}
            </div>
          </div>
        </template>
      </nut-popover>
    </div>

    <!-- 表格 -->
    <div class="table">
      <div class="tr th">
        <template v-for="(item, i) in config[currPage]" :key="i">
          <div class="line" v-if="i != 0"></div>
          <div class="td" :style="{ flex: item.flex }">{{ item.title }}</div>
        </template>
      </div>

      <div class="main_content">
        <nut-infinite-loading v-model="loading" @load-more="pullup">
          <nut-pull-refresh v-model="loading" @refresh="pulldown">
            <template v-for="(row, index) in result.list" :key="index">
              <div class="tr">
                <div v-for="item in config[currPage]" :key="item.key" class="td" :style="{ flex: item.flex }"
                  v-html="rowHandle(row, item.key, false)"></div>
              </div>
              <div class="tr" v-if="row.bonus">
                <div v-for="item in config[currPage]" :key="item.key" class="td" :style="{ flex: item.flex }"
                  v-html="rowHandle(row, item.key, true)"></div>
              </div>
            </template>

            <EmptyState style="margin-top: 40px;" v-if="!loading && !result.list.length"
              :text="t('loginRecord_page_nodata')" :tip="' '">
            </EmptyState>
          </nut-pull-refresh>
        </nut-infinite-loading>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import EmptyState from "../searchGames/components/EmptyState.vue"
import PKwebsocket from "@/lolo/Ws";
import { NetPacket } from "@/netBase/NetPacket";
import { computed, ref, reactive, onUnmounted, watch } from "vue";
import {
  RechagreStatusMap,
  CurrencyMap,
  RechagreStatusColorMap,
  WithdrawStatusMap,
  WithdrawStatusColorMap,
  AuditStatusMap,
  PlatformValueMap,
  WalletTypeMap,
  WashTypeMap,
} from "@/enums/walletEnum";
import { useI18n } from "vue-i18n";
import { timeMap, getTimeObj } from "./common/timeData.ts";
import { convertObjectToDateString } from "@/utils/publicMethods";
import { useRoute, useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import { User } from "@/store/user.ts";
import pinia from "@/store";
import eventBus from "@/lolo/eventBus";

const { t } = useI18n();
const route = useRoute();
const router = useRouter();
const { shopInfoData } = storeToRefs(User(pinia));
/* ---------------- 所有表格配置 ------------------ */
const currPage: any = ref("wash");
if (route.query.page) {
  currPage.value = route.query.page;
}
const titleMap: any = ref({
  recharge: t("route_page_rechargeRecord"),
  withdraw: t("route_page_withdrawRecord"),
  audit: t("route_page_auditRecord"),
  bet: t("route_page_betRecord"),
  account: t("route_page_accountRecord"),
  wash: t("route_page_washRecord"),
});

const config: any = computed(() => {
  return {
    recharge: [
      // 充值记录
      { title: t("rechargeRecord_page_method"), key: "way_id", size: "2.5" },
      { title: t("accountsRecord_page_hb"), key: "currency", size: "2.5" },
      { title: t("rechargeRecord_page_amount"), key: "pay_money", size: "2" },
      { title: t("auditRecord_page_state"), key: "order_status", size: "2" },
      { title: t("auditRecord_page_startTime"), key: "pay_time", size: "2.5" },
    ],
    withdraw: [
      // 提款记录
      { title: t("withdrawRecord_page_wMethod"), key: "way_id", size: "2.5" },
      { title: t("accountsRecord_page_hb"), key: "currency", size: "2.5" },
      { title: t("withdrawRecord_page_wAmount"), key: "pay_money", size: "2" },
      { title: t("auditRecord_page_state"), key: "order_status", size: "2" },
      { title: t("auditRecord_page_startTime"), key: "pay_time", size: "2.5" },
    ],
    audit: [
      // 流水记录
      { title: t("auditRecord_page_audit"), key: "title", size: "2" },
      { title: t("auditRecord_page_auditMon"), key: "amount", size: "2" },
      { title: t("auditRecord_page_auditProgress"), key: "progess", size: "2" },
      { title: t("auditRecord_page_state"), key: "type", size: "2" },
      { title: t("auditRecord_page_startTime"), key: "create_time", size: "2" },
    ],
    bet: [
      // 投注记录
      { title: t("betRecord_page_platform"), key: "platform_id", size: "2" },
      { title: t("betRecord_page_game"), key: "game_type", size: "2" },
      { title: t("betRecord_page_betAmount"), key: "bet_total", size: "2" },
      { title: t("betRecord_page_winLose"), key: "net_value", size: "2" },
      { title: t("betRecord_page_settlement"), key: "balance_time", size: "2" },
    ],
    account: [
      // 账变记录
      { title: t("accountsRecord_page_type"), key: "b_type", size: "2" },
      { title: t("accountsRecord_page_hb"), key: "currency", size: "2" },
      { title: t("accountsRecord_page_amount"), key: "pay_money", size: "2" },
      { title: t("accountsRecord_page_content"), key: "item", size: "2" },
      { title: t("accountsRecord_page_time"), key: "create_time", size: "2" },
    ],
    wash: [
      // 洗码记录
      { title: t("washRecord_page_plat"), key: "type", size: "2" },
      { title: t("rechargeRecord_page_currency"), key: "currency", size: "2" },
      { title: t("washRecord_page_amount"), key: "rebate", size: "2" },
      { title: t("washRecord_page_money"), key: "bet_money", size: "2" },
      { title: t("washRecord_page_time"), key: "create_time", size: "2" },
    ],
  };
});

/* --------------- 搜索项配置 ---------------- */
// 时间
const time: any = ref(1); // 时间
const timeVisible: any = ref(false); // 时间-状态开关
const timeOptions: any = computed(() => {
  // 充值记录-状态选项
  return timeMap();
});

// 充值记录
const rechargeStatus: any = ref(9); // 充值记录-状态
const rechargeStatusVisible: any = ref(false); // 充值记录-状态开关
const rechargeStatusOptions: any = computed(() => {
  // 充值记录-状态选项
  return {
    9: t("rechargeRecord_page_allState"),
    ...RechagreStatusMap(),
  };
});

// 提款记录
const withdrawStatus: any = ref(9); // 提款记录-状态
const withdrawStatusVisible: any = ref(false); // 提款记录-状态开关
const withdrawStatusOptions: any = computed(() => {
  // 提款记录-状态选项
  return {
    9: t("rechargeRecord_page_allState"),
    ...WithdrawStatusMap(),
  };
});

// 流水记录
const auditStatus: any = ref(0); // 流水记录-状态
const auditStatusVisible: any = ref(false); // 流水记录-状态开关
const auditStatusOptions: any = computed(() => {
  // 流水记录-状态选项
  return {
    0: t("accountsRecord_page_allType"),
    ...AuditStatusMap(),
  };
});

// 投注记录
const noNameList: any = ["SBO", "CMD368", "IM", "VR", "TCG", "SABA", "DG"];

const betPlat: any = ref(0); // 投注记录-平台
const betPlatVisible: any = ref(false); // 投注记录-平台开关
const platformList: any = ref({});
const optionsPlat: any = computed(() => {
  // 平台
  return {
    0: t("promo_page_all"),
    ...platformList.value,
  };
});
const game: any = ref(0); // 投注记录-游戏
const gameVisible: any = ref(false); // 投注记录-游戏开关
const gameList: any = ref({});
const optionsGame: any = computed(() => {
  // 游戏
  return {
    0: t("promo_page_all"),
    ...gameList.value,
  };
});

// 账变记录
const accountType: any = ref(0); // 账变记录-类型
const accountTypeVisible: any = ref(false); // 账变记录-类型开关
const accountTypeList: any = ref([]); // 类型列表
const accountTypeMap: any = computed(() => {
  // 类型
  const options: any = {
    0: t("accountsRecord_page_allType"),
  };
  accountTypeList.value.forEach((item: any) => {
    if (!options[item.b_type]) {
      options[item.b_type] = t("bType" + (item.b_type > 100 ? 101 : item.b_type));
    }
  });
  return options;
});

// 洗码记录
const washType: any = ref(0); // 洗码记录-类型
const washTypeVisible: any = ref(false); // 洗码记录-类型开关
const washTypeList: any = ref([]); // 类型列表
const washTypeMap: any = computed(() => {
  // 类型
  const obj: any = {};
  washTypeList.value.forEach((item: any) => {
    if (item != 9999) {
      obj[item] = PlatformValueMap[item];
    }
  });
  return {
    0: t("accountsRecord_page_allType"),
    ...WashTypeMap(),
    ...obj,
  };
});

/* ---------------------------------------- */

// 数据
const loading = ref(false);
const result: any = reactive({
  // 结果
  total_page: 0,
  list: [],
});
const rowHandle = (row: any, key: string, subRow: boolean) => {

  // 格子数据处理
  let rs = "";
  let val = row[key];
  let str = [];
  try {
    str = row.game_type.split("_");
  } catch { }
  switch (key) {
    case "title":
      rs = t(val);
      break;
    case "type":
      if (currPage.value == "wash") {
        if (val == 9999) {
          rs = t("washRecord_page_currPlat");
        } else {
          rs = PlatformValueMap[val];
        }
      } else {
        rs = AuditStatusMap()[val];
      }
      break;
    case "way_id":
      if (currPage.value == "recharge") {
        if (subRow) {
          rs = t("route_page_discounts");
        } else {
          rs = val && wayMap.value[val] ? t(wayMap.value[val]) : val;
        }
      }
      if (currPage.value == "withdraw") {
        rs = val == 2 ? "USDT" : t("api_bankcard_0");
      }
      break;
    case "order_status":
      if (currPage.value == "recharge") {
        rs = `<span style="color:${RechagreStatusColorMap[val]}">${RechagreStatusMap()[val]
          }</span>`;
      }
      if (currPage.value == "withdraw") {
        rs = `<span style="color:${WithdrawStatusColorMap[val]}">${WithdrawStatusMap()[val]
          }</span>`;
      }
      break;
    case "currency":
      if (currPage.value == "recharge") {
        rs = CurrencyMap()[1];
      }
      if (currPage.value == "withdraw") {
        rs = row["way_id"] == 2 ? "USDT" : t("accountsRecord_page_dong");
      }
      if (currPage.value == "account") {
        rs = t("accountsRecord_page_dong");
      }
      if (currPage.value == "wash") {
        rs = t("accountsRecord_page_dong");
      }
      break;
    case "pay_money":

      if (currPage.value == "account") {
        rs = `<span style="color:${row.type == 2 ? "#FF2424" : "#80FF44"}">` + (row.type == 2 ? "-" : "+") + Number(val).toLocaleString() + `</span>`;
      } else {

        if (subRow) {
          rs = Number(row["bonus"]) > 0 ? Number(row["bonus"]).toLocaleString() : "0";
        } else {
          rs = Number(val).toLocaleString();
        }
      }
      break;
    case "amount":
    case "progess":
    case "bet_money":
    case "rebate":
      if (subRow) {
        rs = Number(row["bonus"]) > 0 ? Number(row["bonus"]).toLocaleString() : "0";
      } else {
        rs = Number(val).toLocaleString();
      }
      break;
    case "pay_time":
    case "create_time":
    case "balance_time":
      rs = convertObjectToDateString(val);
      break;
    case "platform_id":
      rs = PlatformValueMap[val];
      break;
    case "bet_total":
      rs = Math.abs(val).toLocaleString();
      break;
    case "net_value":
      rs = `<span style="color:${Number(val) > 0 ? "#80FF44" : "#FF2424"}">${Number(
        val
      ).toLocaleString()}</span>`;
      break;
    case "game_type":
      if (noNameList.includes(str[0]) || !str[1]) {
        rs = t(str[0]);
      } else {
        rs = row.platform_id + "_" + (str[1] || str[0]);
        if (str[2]) {
          rs = rs + "_" + str[2];
        }
        rs = t(rs);
      }
      break;
    case "b_type":
      if (
        row["remark"] &&
        t("bType" + row["remark"]) &&
        t("bType" + row["remark"]) != "bType" + row["remark"]
      ) {
        rs = t("bType" + row["remark"]);
      } else {
        rs = t("bType" + (val > 100 ? 101 : val));
      }
      break;
    case "item":

      if (val == 3) {
        if (row["pay_money"] > 0) {

          rs = WalletTypeMap()["3_0"];
        } else {

          rs = WalletTypeMap()["3_1"];
        }
      } else {

        rs = WalletTypeMap()[val];
      }
      break;
    default:
      rs = val;
  }

  return rs;
};
// 获取数据
const page: any = ref(1);
const queryData = () => {
  // 充值记录
  if (currPage.value == "recharge") {
    const query = NetPacket.req_get_recharge_record_list();
    Object.assign(query.start_time, getTimeObj(time.value).start_time);
    Object.assign(query.end_time, getTimeObj(time.value).end_time);
    query.page = page.value;
    query.status = rechargeStatus.value;
    query.currency = 0;
    query.number_per_page = 20;
    // @ts-ignore
    query.dateType = 0;
    PKwebsocket.instance.send(query, true);
  }
  // 提款记录
  if (currPage.value == "withdraw") {
    const query = NetPacket.req_get_withdraw_record_list();
    Object.assign(query.start_time, getTimeObj(time.value).start_time);
    Object.assign(query.end_time, getTimeObj(time.value).end_time);
    query.page = page.value;
    query.status = withdrawStatus.value;
    query.currency = 0;
    query.number_per_page = 20;
    // @ts-ignore
    query.dateType = 0;
    PKwebsocket.instance.send(query, true);
  }
  // 流水记录
  if (currPage.value == "audit") {
    const query = NetPacket.req_get_audit_record();
    Object.assign(query.start_time, getTimeObj(time.value).start_time);
    Object.assign(query.end_time, getTimeObj(time.value).end_time);
    query.page = page.value;
    query.type = Number(auditStatus.value);
    query.number_per_page = 20;
    // @ts-ignore
    query.dateType = 0;
    PKwebsocket.instance.send(query, true);
  }
  // 投注记录
  if (currPage.value == "bet") {
    const query = NetPacket.req_get_bet_record_list();
    Object.assign(query.start_time, getTimeObj(time.value).start_time);
    Object.assign(query.end_time, getTimeObj(time.value).end_time);
    query.page_num = page.value;
    query.platform_id = betPlat.value;
    query.game_type = game.value.toString();
    query.play_type = "0";
    query.number_per_page = 20;
    // @ts-ignore
    query.dateType = 0;
    PKwebsocket.instance.send(query, true);
    setTimeout(() => {
      getPlatformData();
    }, 300);
  }
  // 账变记录
  if (currPage.value == "account") {
    const query = NetPacket.req_get_accounting_change_record_list();
    Object.assign(query.start_time, getTimeObj(time.value).start_time);
    Object.assign(query.end_time, getTimeObj(time.value).end_time);
    query.page = page.value;
    query.type = accountType.value;
    query.number_per_page = 20;
    // @ts-ignore
    query.dateType = 0;
    PKwebsocket.instance.send(query, true);
  }
  // 洗码记录
  if (currPage.value == "wash") {
    if (washType.value == 0) {
      // 查询全部平台id
      queryPlatIds();
    }
    setTimeout(() => {
      const query = NetPacket.req_get_vip_rebate();
      Object.assign(query.start_time, getTimeObj(time.value).start_time);
      Object.assign(query.end_time, getTimeObj(time.value).end_time);
      query.page = page.value;
      query.type = washType.value;
      query.number_per_page = 20;
      // @ts-ignore
      query.dateType = 0;
      PKwebsocket.instance.send(query, true);
    }, 100);
  }
  loading.value = true;
};
// 重置数据
const resetData = () => {
  // console.error('重置数据')
  result.total_page = 0;
  result.list = [];
  page.value = 1;
  setTimeout(() => {
    queryData();
  }, 0);
};
const resultHandle = (rs: any) => {
  console.log("记录---", rs);
  // 数据处理
  setTimeout(() => {
    loading.value = false;
  }, 300);
  result.total_page = rs.total_page || rs.total_pages || 0;
  let arr: any = [];
  switch (currPage.value) {
    case "withdraw": // 提款记录
      arr = result.list.concat(rs.withdraw_record_list).sort((a: any, b: any) => {
        return (
          Date.parse(convertObjectToDateString(b.pay_time, true)) -
          Date.parse(convertObjectToDateString(a.pay_time, true))
        );
      });
      break;
    case "recharge": // 充值记录
      arr = result.list.concat(rs.recharge_record_list).sort((a: any, b: any) => {
        return (
          Date.parse(convertObjectToDateString(b.pay_time, true)) -
          Date.parse(convertObjectToDateString(a.pay_time, true))
        );
      });
      break;
    case "audit": // 流水记录
      arr = result.list.concat(rs.record_list || []).sort((a: any, b: any) => {
        return (
          Date.parse(convertObjectToDateString(b.create_time, true)) -
          Date.parse(convertObjectToDateString(a.create_time, true))
        );
      });
      break;
    case "bet":
      arr = result.list.concat(rs.bet_record_list || []).sort((a: any, b: any) => {
        return (
          Date.parse(convertObjectToDateString(b.balance_time, true)) -
          Date.parse(convertObjectToDateString(a.balance_time, true))
        );
      });
      break;
    case "account":
      arr = result.list.concat(rs.record_list || []).sort((a: any, b: any) => {
        return (
          Date.parse(convertObjectToDateString(b.create_time, true)) -
          Date.parse(convertObjectToDateString(a.create_time, true))
        );
      });
      setTimeout(() => {
        if (accountType.value == 0) {
          // 保存类型
          accountTypeList.value = arr || [];
        }
      });
      break;
    case "wash":
      rs.record_list.forEach((item: any) => {
        if (item.bet_money) {
          // 没有数据的就是查平台时返回的无效数据
          result.list.push(item);
        }
      });
      // 把id放到平台id里
      rs.record_list.forEach((item: any) => {
        if (!washTypeList.value.includes(item.type)) {
          washTypeList.value.push(item.type);
        }
      });
      arr = result.list.sort((a: any, b: any) => {
        return (
          Date.parse(convertObjectToDateString(b.create_time, true)) -
          Date.parse(convertObjectToDateString(a.create_time, true))
        );
      });
      break;
  }

  result.list = arr;
};
// 投注记录-获取平台数据
const getPlatformData = () => {
  const query = NetPacket.req_platform_gametype_list();
  Object.assign(query.start_time, getTimeObj(time.value).start_time);
  Object.assign(query.end_time, getTimeObj(time.value).end_time);
  PKwebsocket.instance.send(query, true);
};
const platformHandle = (rs: any) => {
  // 平台数据处理
  rs.plat_rec_list.map((item: any) => {
    platformList.value[Number(item)] = PlatformValueMap[item];
  });

  rs.gtype_rec_list.map((item: string) => {
    let key = item;
    try {
      if (item.includes("_")) {
        key = PlatformValueMap[item.split("_")[0]] + "_" + item.split("_")[1];
        if (item.split("_")[2]) {
          key = key + "_" + item.split("_")[2];
        }
      } else {
        key = item;
      }

      gameList.value[item] = t(key);
    } catch { }
  });
};
// 洗码记录-获取有洗码记录的平台
const queryPlatIds = () => {
  // 查询
  const query = NetPacket.req_get_vip_rebate();
  Object.assign(query.start_time, getTimeObj(time.value).start_time);
  Object.assign(query.end_time, getTimeObj(time.value).end_time);
  query.page = page.value;
  query.type = -2;
  PKwebsocket.instance.send(query, true);
};
setTimeout(() => {
  getPlatformData();
}, 500);
// 加载更多
const pullup = () => {
  if (result.total_page <= result.list.length) return (loading.value = false);
  page.value++;
  queryData();
};
// 刷新数据
const pulldown = () => {
  resetData();
};
setTimeout(() => {
  resetData();
}, 300);

/* ------------ 监听 ------------- */
// 充值记录
const wayMap: any = ref({}); // 充值记录-支付方式
const getPays = () => {
  if (currPage.value !== "recharge") return;
  const query = NetPacket.req_get_shop_info();
  PKwebsocket.instance.send(query, true);
};
const waysHandle = (rs: any) => {
  rs.rechargelist_by_paymenttype.map((item: any) => {
    wayMap.value[item.paymenttype] = item.payname;
  });
  console.log("----##", wayMap.value);
};
getPays();
eventBus.on("msg_notify_get_recharge_record_list", resultHandle);
// 提款记录
eventBus.on("msg_notify_get_withdraw_record_list", resultHandle);
// 流水记录
eventBus.on("msg_notify_get_audit_record", resultHandle);
// 投注记录
eventBus.on("msg_notify_get_bet_record_list", resultHandle);
eventBus.on("msg_notify_platform_gametype_list", platformHandle);
// 账变记录
eventBus.on("msg_notify_get_accounting_change_record_list", resultHandle);
// 洗码记录
eventBus.on("msg_notify_get_vip_rebate", resultHandle);
onUnmounted(() => {
  eventBus.off("msg_notify_get_recharge_record_list", resultHandle);
  // 提款记录
  eventBus.off("msg_notify_get_withdraw_record_list", resultHandle);
  // 流水记录
  eventBus.off("msg_notify_get_audit_record", resultHandle);
  // 投注记录
  eventBus.off("msg_notify_get_bet_record_list", resultHandle);
  eventBus.off("msg_notify_platform_gametype_list", platformHandle);
  // 账变记录
  eventBus.off("msg_notify_get_accounting_change_record_list", resultHandle);
  // 洗码记录
  eventBus.off("msg_notify_get_vip_rebate", resultHandle);
});
watch(
  () => shopInfoData.value,
  (n) => {
    waysHandle(n);
    console.log("%%充值列表%%", n);
  }
);
</script>

<style lang="scss" scopd>
.record_content {
  padding: 16px 14px 0 14px;
  height: calc(var(--vh) * 100 - 70px);
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .table {
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    flex: 1;

    .tr {
      min-height: 44px;
      display: flex;
      align-items: center;

      &:nth-child(odd) {
        background-color: #131232;
      }

      &:nth-child(even) {
        background-color: #1b1a44;
      }

      .td {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        text-align: center;
      }

      .time {
        font-size: 10px;
      }
    }

    .th {
      background-color: #394eff !important;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }
  }

  .main_content {
    flex: 1;
    overflow-y: auto;
    flex-shrink: 0;
  }

  .search {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 14px;

    .nut-popover-wrapper {
      flex: 1;
      margin-right: 11px;

      &:last-child {
        margin-right: 0;
      }
    }

    .search_item {
      height: 44px;
      border-radius: 8px;
      background: #131232;
      box-shadow: 0.5px 0.5px 1px 0px #2e296b inset;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 14px;
      color: #fff;
      font-size: 14px;
      font-weight: 500;

      .more {
        width: 14px;
        height: 14px;
      }
    }
  }
}
</style>

<style lang="scss">
.nut-popover .nut-popover-content,
.nut-popover-content-group {
  border-radius: 8px;
}

.record_select_content {
  border-radius: 8px;
  overflow: hidden;
  background-color: #333260;

  .item {
    height: 48px;
    min-width: 150px;
    padding: 0 14px;
    background-color: #333260;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
  }

  .active_item {
    background-color: #1d1c3c;
  }
}
</style>
